<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Sample3: Ext.ux.google.search.* + Google Suggest</title>

    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/xtheme-gray.css" />
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-2.2.1/ext-all.js"> </script>

    <script type="text/javascript" src="http://extuxgoogle.googlecode.com/svn/trunk/Ext.ux.google.Loader.js"></script>
    <script type="text/javascript" src="http://extuxgoogle.googlecode.com/svn/trunk/search/Ext.ux.google.search.Proxy.js"></script>
    <script type="text/javascript" src="http://extuxgoogle.googlecode.com/svn/trunk/search/Ext.ux.google.search.Reader.js"></script>
    <script type="text/javascript" src="http://extuxgoogle.googlecode.com/svn/trunk/search/Ext.ux.google.search.Store.js"></script>

    <style>
      .x-view-over{
        background-color: #efefef;
      }
       
      .searchresult{
        padding: 5px;
      }
      
      .searchresult a{
          color: #008200;
          padding-left: 5px;
          font-weight: bold;
          font-size: 0.8em;
      }

      .searchresult h3 a{
        color: #2200CC;
        font-weight: bold;
        font-size: 1.0em;
      }
      
      .searchresult span{
          padding-left: 5px;
          font-size: 0.9em;
      }
      
    </style>

    <script type="text/javascript"><!--
      Ext.BLANK_IMAGE_URL = "http://extjs.cachefly.net/ext-2.2.1/resources/images/default/s.gif";
      Ext.onReady(function(){
        var resultStore = new Ext.ux.google.search.Store({
          proxy: {
//            apiKey: 'ABQIAAAA3HEaipgCJKasbKv8S1gdbBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTzLJPpUvKOKufaCAa_bt2F6iKhpw'
            apiKey: 'ABQIAAAA3HEaipgCJKasbKv8S1gdbBQRwYGrJs7PTc23wXYGvCkgV6rZmhSdnrJh9Xe77AdhJyXWHiwWb8t7pA'
          },
          listeners: {
            searchapiinitialized: function(){
              Ext.getCmp('ptbar').pageSize = resultStore.getResultSetSize();
            }
          }
        });

        var suggestStore = new Ext.data.Store({
          proxy: new Ext.data.ScriptTagProxy({
            url: 'http://naotori.com/tools/gsuggest.php'
          }),
          baseParams: { type: 'jsonp' },
          reader: new Ext.data.JsonReader({
            root: 'records'  
          },[ {name: 'suggestion'} ])
        });

        new Ext.Viewport({
          layout: 'border',
          items: [{
            region: 'north',
            height: 40,
            frame: true,
            layout: 'table',
            layoutConfig: {columns:2},
            items:[{
              xtype: 'combo',
              id: 'searchtext',
              width: 300,
              emptyText: '2文字以上の入力で検索を開始します',
              store: suggestStore,
              displayField:'suggestion',
              minChars: 2,
              typeAhead: true,
              hideTrigger: true,
              selectOnFocus:true,
              queryParam: 'q',
              listeners: {
                select: function(c,r,i){
                  var q = r.data.suggestion;
                  resultStore.load({params:{query: q, start: 0 }});
                },
                specialkey: function(t,e){
                  if(e.getKey() == e.ENTER){
                    var q = Ext.getCmp('searchtext').getValue();
                    if(q){
                      resultStore.load({params:{query: q, start: 0 }});
                    }
                  }
                }
              }
            },{
              xtype:'button',
              text: '検索',
              handler: function(){
                var q = Ext.getCmp('searchtext').getValue();
                if(q){
                  resultStore.load({params:{query: q, start: 0 }});
                }
              }
            }]
          },{
            region: 'center',
            layout: 'fit',
            autoScroll: true,
            items: [{
              layout: 'fit',
              xtype: 'dataview',
              autoHeight: true,
              autoWidth: true,
              overClass: 'x-view-over',
              itemSelector: 'div.searchresult',
              store: resultStore,
              tpl: new Ext.XTemplate(
                '<tpl for="."><div class="searchresult">',
                  '<h3><a href="{url}" target="_blank">{title}</a></h3>',
                  '<span>{content}</span><br />',
                  '<a href="{url}" target="_blank">{url}</span>',
                '</div></tpl>'
              )
            }],
            bbar: new Ext.PagingToolbar({
              store: resultStore,
              id: 'ptbar',
              pageSize: resultStore.getResultSetSize()
            })
          }]
        });

      });
    // --></script>
  </head>
  <body>
    <div id='results'></div>
  </body>
</html>
